/*
 * @Author: your name
 * @Date: 2021-04-21 18:09:46
 * @LastEditTime: 2021-06-16 15:33:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /lego-nuxt/components/properties/NavigateEditor/navigate.extends.js
 */
import { setTimeout } from 'timers'
import tool from '~/util/tool'

const NavigateEditorExtends = {
  methods: {
    changeListShow () {
      this.listShow = !this.listShow
    },
    changeRadiusValue (v) {
      let _this = this
      _this.editComponent({
        _id: _this.selectedComponent._id,
        field: 'radius_value',
        value: v,
      })
      _this.addStep()
    },
    changeRowGutter (v) {
      let _this = this
      _this.editComponent({
        _id: _this.selectedComponent._id,
        field: 'rowGutter',
        value: v,
      })
      _this.addStep()
    },
    changeColor (val) {
      let data = {
        _id: this.selectedComponent._id,
        field: 'textColor',
        value: val,
      }
      this.editComponent(data)
    },
    resetColor () {
      this.textColor = '#343434'
      this.changeColor(this.textColor)
    },
    changeBgColor (val) {
      let data = {
        _id: this.selectedComponent._id,
        field: 'bgColor',
        value: val,
      }
      this.editComponent(data)
    },
    resetBgColor () {
      this.bgColor = '#FFFFFF'
      this.changeBgColor(this.bgColor)
    },
    changeRadius () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'radius',
          value: _this.radius,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------
      }, 100)
    },
    changeShowTitle (val) {
      let _this = this
      let data = {
        _id: _this.selectedComponent._id,
        field: 'showTitle',
        value: val ? 'Y' : 'N',
      }
      _this.editComponent(data)
      _this.addStep()
    },
    changeScreenNum () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'screenNum',
          value: _this.screenNum,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------

        _this.editComponent({
          _id: _this.selectedComponent._id,
          field: 'imageList',
          value: _this.getDefaultImages(
            _this.rowNum * _this.navNumPerRow * _this.screenNum
          ),
        })
      }, 100)
    },
    changeRowNum () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'rowNum',
          value: _this.rowNum,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------

        _this.editComponent({
          _id: _this.selectedComponent._id,
          field: 'imageList',
          value: _this.getDefaultImages(
            _this.rowNum * _this.navNumPerRow * _this.screenNum
          ),
        })
      }, 100)
    },
    changeNavNumPerRow () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'navNumPerRow',
          value: _this.navNumPerRow,
        }
        _this.editComponent(data)
        _this.addStep()

        _this.editComponent({
          _id: _this.selectedComponent._id,
          field: 'imageList',
          value: _this.getDefaultImages(
            _this.rowNum * _this.navNumPerRow * _this.screenNum
          ),
        })
        // -------------
      }, 100)
    },
    changeLeftRightPad () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'leftRightPad',
          value: _this.leftRightPad,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------
      }, 100)
    },
    changeUpDownPad () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'upDownPad',
          value: _this.upDownPad,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------
      }, 100)
    },
    changeImageSize () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'imageSize',
          value: _this.imageSize,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------
      }, 100)
    },
    changeTextSize () {
      let _this = this
      setTimeout(function () {
        // -------------
        let data = {
          _id: _this.selectedComponent._id,
          field: 'textSize',
          value: _this.textSize,
        }
        _this.editComponent(data)
        _this.addStep()
        // -------------
      }, 100)
    },
    dragEnd () {
      let tempList = JSON.parse(JSON.stringify(this.imageList))
      let _this = this
      this.editComponent({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: [],
      })
      this.fillDataToForm()

      setTimeout(() => {
        // ===========清空tab头后延迟执行=========
        _this.editComponent({
          _id: _this.selectedComponent._id,
          field: 'imageList',
          value: tempList,
        })
        _this.fillDataToForm()
      }, 200)
    },
    getDefaultImages (n) {
      let list = []
      for (let i = 0; i < n; i++) {
        let id = tool.guid()
        list.push({
          image: '',
          title: '导航标题',
          _id: id,
          link: '',
          uploadTag: false,
        })
      }
      return list
    },
    handleUploadError () {
      this.uploading = false
      this.$message({
        type: 'error',
        message: '上传失败!',
      })
    },
    handleUploadPError () {
      this.$message({
        type: 'error',
        message: '上传失败!',
      })
    },
    handleUploaduccess (response) {
      let _this = this
      this.uploading = false
      if (response.flag === 'F') {
        this.$message({
          type: 'error',
          message: '上传失败!' + response.msg,
        })
      } else {
        this.updateChildListModelField({
          _id: _this.selectedComponent._id,
          field: 'imageList',
          childId: _this.uploadItem._id,
          childField: 'image',
          value: response.data,
        })
        this.fillDataToForm()
        this.addStep()
      }
    },
    uploadClick (item, index) {
      this.clickIndex = index
      this.uploadItem = item
    },

    beforeUpload (file) {
      let isImage = file.type.indexOf('image/') !== -1
      let isGif = file.type.indexOf('gif') !== -1
      let isSizeLimit = file.size / 1024 <= 300
      let isSizeLimitGif = file.size / 1024 <= 400

      if (!isImage) {
        this.$message.error('只能上传图片!')
        return false
      }
      if (!isGif && !isSizeLimit) {
        this.$message.error('图片大小不能超过300KB!')
        return false
      }
      if (isGif && !isSizeLimitGif) {
        this.$message.error('图片大小不能超过400KB!')
        return false
      }

      this.uploading = true
      return true
    },
    beforePUpload (file) {
      let isImage = file.type.indexOf('image/') !== -1
      let isGif = file.type.indexOf('gif') !== -1
      let isSizeLimit = file.size / 1024 <= 300
      let isSizeLimitGif = file.size / 1024 <= 400

      if (!isImage) {
        this.$message.error('只能上传图片!')
        return false
      }
      if (!isGif && !isSizeLimit) {
        this.$message.error('图片大小不能超过300KB!')
        return false
      }
      if (isGif && !isSizeLimitGif) {
        this.$message.error('图片大小不能超过400KB!')
        return false
      }
      return true
    },
    handleUploadPImagesuccess (response) {
      let _this = this
      if (response.flag === 'F') {
        this.$message({
          type: 'error',
          message: '上传失败!' + response.msg,
        })
      } else {
        this.placeholder.image = response.data
        this.editComponent({
          _id: _this.selectedComponent._id,
          field: 'placeholder',
          value: JSON.parse(JSON.stringify(this.placeholder)),
        })
        this.fillDataToForm()
        this.addStep()
      }
    },
    fillDataToForm () {
      this.imageList = JSON.parse(JSON.stringify(this.selectedComponent.imageList))
      this.placeholder = JSON.parse(
        JSON.stringify(
          this.selectedComponent.placeholder
            ? this.selectedComponent.placeholder
            : {}
        )
      )
      this.showTitle = this.selectedComponent.showTitle === 'N' ? false : true

      // this.screenNum = this.selectedComponent.screenNum
      // this.radius = this.selectedComponent.radius
      // this.radius_value = this.selectedComponent.radius_value
      // this.navNumPerRow = this.selectedComponent.navNumPerRow
      // this.leftRightPad = this.selectedComponent.leftRightPad
      // this.upDownPad = this.selectedComponent.upDownPad
      // this.bgColor = this.selectedComponent.bgColor
      // this.textColor = this.selectedComponent.textColor
      // this.textSize = this.selectedComponent.textSize
      // this.imageSize = this.selectedComponent.imageSize
      // this.rowNum = this.selectedComponent.rowNum

      const attrs = [
        'screenNum', 'radius', 'radius_value', 'navNumPerRow'
        , 'leftRightPad', 'upDownPad', 'bgColor', 'textColor'
        , 'textSize', 'imageSize', 'rowNum'
      ]

      for(let attr of attrs) {
        this[attr] = this.selectedComponent[attr]
      }
    },
    addItem () {
      let length = this.imageList.length
      let max = this.navNumPerRow * this.screenNum * this.rowNum
      let filter =
        this.screenNum === 1 && this.rowNum === 2 && this.navNumPerRow === 2
      if (!filter && length >= max) {
        this.$message.error(`该模式下，最多添加${max}个导航！`)
        return
      }

      let item = {
        image: '',
        title: '导航标题',
        _id: tool.guid(),
        link: '',
        uploadTag: false,
      }
      this.addComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: item,
      })
      this.fillDataToForm()
      this.addStep()
    },
    removeItem (item, index) {
      this.removeComponentListField({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: index,
      })
      this.fillDataToForm()
      this.addStep()
    },
    clearItem (item, index) {
      item.image = ''
      item.link = ''
      this.editComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: item,
        index: index,
      })
      this.fillDataToForm()
      this.addStep()
    },
    clearPItem () {
      this.placeholder.image = ''
      this.placeholder.link = ''
      let p = JSON.parse(JSON.stringify(this.placeholder))
      this.editComponent({
        _id: this.selectedComponent._id,
        field: 'placeholder',
        value: p,
      })
      this.addStep()
    },
    changeImageLink (item, index) {
      this.editComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: item,
        index: index,
      })
      this.fillDataToForm()
      this.addStep()
    },
    changePImageLink () {
      let tempList = JSON.parse(JSON.stringify(this.placeholder))
      this.editComponent({
        _id: this.selectedComponent._id,
        field: 'placeholder',
        value: tempList,
      })
      this.addStep()
    },
    changeTitle () {
      let tempList = JSON.parse(JSON.stringify(this.imageList))
      let _this = this
      _this.editComponent({
        _id: _this.selectedComponent._id,
        field: 'imageList',
        value: [],
      })
      _this.fillDataToForm()

      setTimeout(() => {
        _this.editComponent({
          _id: _this.selectedComponent._id,
          field: 'imageList',
          value: tempList,
        })
        _this.fillDataToForm()
      }, 100)

      _this.addStep()
    },
    changePTitle () {
      let _this = this
      // this.placeholder.title=val;
      let p = JSON.parse(JSON.stringify(this.placeholder))
      _this.editComponent({
        _id: _this.selectedComponent._id,
        field: 'placeholder',
        value: p,
      })
      this.addStep()
    },
    addStep () {
      let _this = this
      setTimeout(() => {
        // ------------------
        if (_this.tag) {
          _this.tag = false
          this.stepsAdd1(this.pageContent)
          setTimeout(() => {
            _this.tag = true
          }, 500)
        }
        // ------------------
      }, 200)
    },
    initData () {
      if (this.selectedComponent.imageList.length === 0) {
        this.editComponent({
          _id: this.selectedComponent._id,
          field: 'imageList',
          value: this.getDefaultImages(5),
        })
      }
    },
    openRuleConfig (item, index) {
      this.configSelectedItem = item
      this.configSelectedIndex = index
      this.$refs.ruleconfig.openDialog()
    },
    saveRuleConfig (data) {
      // 保存规则后的回调，修改组件的上下架时间和规则状态
      let tag = false
      if (data.onlineTime || data.ruleList.length > 0) {
        tag = true
      }

      this.configSelectedItem.ruleTag = tag

      this.editComponentListItem({
        _id: this.selectedComponent._id,
        field: 'imageList',
        value: this.configSelectedItem,
        index: this.configSelectedIndex,
      })

      let hasTrue = this.selectedComponent.imageList.find((a) => a.ruleTag)

      this.editComponent({
        _id: this.selectedComponent._id,
        field: 'childRuleTag',
        value: hasTrue ? true : false,
      })
      this.fillDataToForm()
    }
  }
}

export default NavigateEditorExtends
